{layout name="common/layout"/}

<style>
  .mySwiper2bot img {
    height: 380px;
    object-fit: contain;
  }
  .mySwiper1fa .swiper-slide img {
    height: 90px;
    object-fit: contain;
  }
  .product_show .section_2 .tab .tab_list.active {
    background: #12257c;
  }
  .product_show .section_2 .tab_cont .conts {
    padding: 0;
    box-shadow: none;
    margin-top: 50px;
    min-height: 100px;
  }
  .product_show .section_1 .message .text {
    font-size: 16px;
  }
</style>
<div class="public_banner">
  <div class="img w100 h100">
    <img src="__ADDON__/xnr/image/banner_10.jpg" class="w100 h100" alt="" />
  </div>
  <div class="ban_cont w1300">
    <!--            <div class="title">产品中心</div>-->
    <!--            <div class="title_en">Product Center</div>-->
  </div>
</div>
<div class="product_show">
  <div class="section_1 w1300 disflex flex_lmr">
    <div class="carousel">
      <div class="mySwiper2fa">
        <div class="swiper mySwiper2bot">
          <div class="swiper-wrapper">
            {volist id="item" name="$__ARCHIVES__.images|explode=',',###"}
            <div class="swiper-slide disflex flex_lmr">
              <img src="{$item|cdnurl}" class="w100 h100" alt="" />
            </div>
            {/volist}
          </div>
        </div>
      </div>
      <div class="mySwiper1fa">
        <div class="swiper mySwipertop">
          <div class="swiper-wrapper">
            {volist id="item" name="$__ARCHIVES__.images|explode=',',###"}
            <div class="swiper-slide" style="cursor: pointer">
              <img src="{$item|cdnurl}" class="middle w100 h100" alt="" />
            </div>
            {/volist}
          </div>
        </div>
      </div>
    </div>
    <div class="message">
      <div class="name">{$__ARCHIVES__.title}</div>
      <div class="refer">产品介绍：</div>
      <div class="text">{$__ARCHIVES__.prd}</div>
    </div>
  </div>
  <div class="section_2 w1300">
    <div class="tab disflex">
      <div class="tab_list active">产品介绍</div>
      <div class="tab_list">规格参数</div>
      <div class="tab_list">安装指标</div>
    </div>
    <div class="tab_cont">
      <div class="conts">{$__ARCHIVES__.js}</div>
      <div class="conts">{$__ARCHIVES__.gg}</div>
      <div class="conts">{$__ARCHIVES__.az}</div>
    </div>
  </div>
</div>

<script language="javascript">
  var swiper = new Swiper(".mySwipertop", {
    spaceBetween: 5,
    slidesPerView: 4,
    freeMode: true,
    watchSlidesProgress: true,
    breakpoints: {
      300: {
        //当屏幕宽度大于等于320
        loopedSlides: 3,
        slidesPerView: "3",
        spaceBetween: 5,
      },
      600: {
        //当屏幕宽度大于等于320
        loopedSlides: 3,
        slidesPerView: "3",
        spaceBetween: 5,
      },
      768: {
        //当屏幕宽度大于等于768
        loopedSlides: 4,
        slidesPerView: "4",
        spaceBetween: 3,
      },
      1367: {
        //当屏幕宽度大于等于1280
        loopedSlides: 4,
        slidesPerView: "4",
      },
    },
  });
  var swiper2 = new Swiper(".mySwiper2bot", {
    loop: true,
    spaceBetween: 10,
    thumbs: {
      swiper: swiper,
    },
  });
</script>
